<template>
  <div class="StartSetting_2">
    <div class="box">
      <div class="StartTitle">评委</div>
      <!-- 评委人数 -->
      <div class="custom-number">
        <div>评委人数:</div>
        <select id="customSelect" v-model="selectedValue">
          <option v-for="item in personOptions" :key="item.value" :value="item.label">
            {{ item.label }}
          </option>
        </select>
      </div>

      <div class="title">奖项设置:</div>
      <!-- 奖项设置1 -->
      <div class="custom-select-box">
        <input id="option1" v-model="selectedOption" type="radio" name="options" value="option1" />
        <label for="option1">
          <div class="custom-checkbox">
            <div>
              <input
                v-model="selectedAwards.t"
                class="option-child"
                type="checkbox"
                name="options"
                :disabled="!selectedOption.includes('option1')"
              />
              特等奖
              <select
                v-model="selectedAwards.tCount"
                :disabled="!selectedAwards.t"
                class="custom-select"
              >
                <option v-for="item in personOptions_t" :key="item.value" :value="item.label">
                  {{ item.label }}
                </option>
              </select>
            </div>
            <div>
              <input
                v-model="selectedAwards.y"
                class="option-child"
                type="checkbox"
                name="options"
                :disabled="!selectedOption.includes('option1')"
              />
              一等奖
              <select
                v-model="selectedAwards.yCount"
                :disabled="!selectedAwards.y"
                class="custom-select"
              >
                <option v-for="item in personOptions_y" :key="item.value" :value="item.label">
                  {{ item.label }}
                </option>
              </select>
            </div>
            <div>
              <input
                v-model="selectedAwards.e"
                class="option-child"
                type="checkbox"
                name="options"
                :disabled="!selectedOption.includes('option1')"
              />
              二等奖
              <select
                v-model="selectedAwards.eCount"
                :disabled="!selectedAwards.e"
                class="custom-select"
              >
                <option v-for="item in personOptions_e" :key="item.value" :value="item.label">
                  {{ item.label }}
                </option>
              </select>
            </div>
            <div>
              <input
                v-model="selectedAwards.s"
                class="option-child"
                type="checkbox"
                name="options"
                :disabled="!selectedOption.includes('option1')"
              />
              三等奖
              <select
                v-model="selectedAwards.sCount"
                :disabled="!selectedAwards.s"
                class="custom-select"
              >
                <option v-for="item in personOptions_s" :key="item.value" :value="item.label">
                  {{ item.label }}
                </option>
              </select>
            </div>
          </div>
        </label>
      </div>

      <!-- 奖项设置2 -->
      <div class="custom-select-box">
        <input id="option2" v-model="selectedOption" type="radio" name="options" value="option2" />
        <label for="option2">
          <div class="custom-checkbox">
            <div>
              <input
                v-model="selectedAwards.jin"
                class="option-child"
                type="checkbox"
                name="options"
                :disabled="!selectedOption.includes('option2')"
              />
              特等奖
              <select
                v-model="selectedAwards.jinCount"
                :disabled="!selectedAwards.jin"
                class="custom-select"
              >
                <option v-for="item in personOptions_jin" :key="item.value" :value="item.label">
                  {{ item.label }}
                </option>
              </select>
            </div>
            <div>
              <input
                v-model="selectedAwards.yin"
                class="option-child"
                type="checkbox"
                name="options"
                :disabled="!selectedOption.includes('option2')"
              />
              一等奖
              <select
                v-model="selectedAwards.yinCount"
                :disabled="!selectedAwards.yin"
                class="custom-select"
              >
                <option v-for="item in personOptions_yin" :key="item.value" :value="item.label">
                  {{ item.label }}
                </option>
              </select>
            </div>
            <div>
              <input
                v-model="selectedAwards.tong"
                class="option-child"
                type="checkbox"
                name="options"
                :disabled="!selectedOption.includes('option2')"
              />
              二等奖
              <select
                v-model="selectedAwards.tongCount"
                :disabled="!selectedAwards.tong"
                class="custom-select"
              >
                <option v-for="item in personOptions_tong" :key="item.value" :value="item.label">
                  {{ item.label }}
                </option>
              </select>
            </div>
          </div>
        </label>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import './StartSetting_2.css'
import { onMounted, onUnmounted, ref } from 'vue'
import { store } from '../../store'

//时间选择
const selectedValue = ref('2')
const selectedOption = ref('option1')

const selectedAwards = ref({
  t: false, // 特等奖
  y: false, // 一等奖
  e: false, // 二等奖
  s: false, // 三等奖
  jin: false, // 特等奖
  yin: false, // 一等奖
  tong: false, // 二等奖
  tCount: '2', // 特等奖数量
  yCount: '3', // 一等奖数量
  eCount: '4', // 二等奖数量
  sCount: '5', // 三等奖数量
  jinCount: '', // 特等奖数量
  yinCount: '', // 一等奖数量
  tongCount: '' // 二等奖数量
})

const personOptions = [
  { value: '0', label: '0' },
  { value: '1', label: '1' },
  { value: '2', label: '2' },
  { value: '3', label: '3' },
  { value: '4', label: '4' },
  { value: '5', label: '5' },
  { value: '6', label: '6' },
  { value: '7', label: '7' }
]
const personOptions_t = [
  { value: 'option', label: '0' },
  { value: 'option1', label: '1' },
  { value: 'option2', label: '2' },
  { value: 'option3', label: '3' },
  { value: 'option4', label: '4' },
  { value: 'option5', label: '5' },
  { value: 'option6', label: '6' },
  { value: 'option7', label: '7' }
]
const personOptions_y = [
  { value: 'option', label: '0' },
  { value: 'option1', label: '1' },
  { value: 'option2', label: '2' },
  { value: 'option3', label: '3' },
  { value: 'option4', label: '4' },
  { value: 'option5', label: '5' },
  { value: 'option6', label: '6' },
  { value: 'option7', label: '7' }
]
const personOptions_e = [
  { value: 'option', label: '0' },
  { value: 'option1', label: '1' },
  { value: 'option2', label: '2' },
  { value: 'option3', label: '3' },
  { value: 'option4', label: '4' },
  { value: 'option5', label: '5' },
  { value: 'option6', label: '6' },
  { value: 'option7', label: '7' }
]
const personOptions_s = [
  { value: 'option', label: '0' },
  { value: 'option1', label: '1' },
  { value: 'option2', label: '2' },
  { value: 'option3', label: '3' },
  { value: 'option4', label: '4' },
  { value: 'option5', label: '5' },
  { value: 'option6', label: '6' },
  { value: 'option7', label: '7' }
]
const personOptions_jin = [
  { value: 'option', label: '0' },
  { value: 'option1', label: '1' },
  { value: 'option2', label: '2' },
  { value: 'option3', label: '3' },
  { value: 'option4', label: '4' },
  { value: 'option5', label: '5' },
  { value: 'option6', label: '6' },
  { value: 'option7', label: '7' }
]
const personOptions_yin = [
  { value: 'option', label: '0' },
  { value: 'option1', label: '1' },
  { value: 'option2', label: '2' },
  { value: 'option3', label: '3' },
  { value: 'option4', label: '4' },
  { value: 'option5', label: '5' },
  { value: 'option6', label: '6' },
  { value: 'option7', label: '7' }
]
const personOptions_tong = [
  { value: 'option', label: '0' },
  { value: 'option1', label: '1' },
  { value: 'option2', label: '2' },
  { value: 'option3', label: '3' },
  { value: 'option4', label: '4' },
  { value: 'option5', label: '5' },
  { value: 'option6', label: '6' },
  { value: 'option7', label: '7' }
]

const saveFormData = () => {
  if (selectedOption.value === 'option1') {
    store.jiangxiang = {
      tCount: selectedAwards.value.tCount,
      yCount: selectedAwards.value.yCount,
      eCount: selectedAwards.value.eCount,
      sCount: selectedAwards.value.sCount,
      jinCount: '',
      tongCount: '',
      yinCount: ''
    }
  } else if (selectedOption.value === 'option2') {
    store.jiangxiang = {
      tCount: '',
      yCount: '',
      eCount: '',
      sCount: '',
      jinCount: selectedAwards.value.jinCount,
      tongCount: selectedAwards.value.tongCount,
      yinCount: selectedAwards.value.yinCount
    }
  }
}
// 在组件卸载时保存表单数据
onMounted(() => {
  saveFormData()
})
// 在组件卸载时保存表单数据
onUnmounted(() => {
  saveFormData()
})

//倒计时样式选择
//
</script>

<style scoped></style>
